<template>
	<view style="background-color: white;">
		
		<!-- 导航栏 -->
		<view class="box-main-top" :style="{ height: homeTop+88 + 'rpx' }">
			<!-- 导航栏 -->
			<view class="head-wrapper" id="home" :style="{ top: homeTop + 'rpx' }">
				<image class="box-logo " src="https://yjgs.jsonbug.com/test/wx_logo.png" mode="aspectFill"></image>
			</view>
			<!-- end -->
		</view>
		<!-- end -->
		<view :style="{ height: homeTop+88 + 'rpx' }"> </view>
		
		<!-- 顶部图片 -->
		<view class="m-20">
			<image  style="width: 100%;" :src="$timer.ensureUrl('https://yjgs.jsonbug.com/storage/default/20250303/4496a16fc2bd56443d704bf03fcfc6e.png')"
				mode="widthFix"></image>
		</view>
		<!-- end -->
		
		<view class="ml-20 "  style="width: calc(100% - 40rpx);border:0.1rpx dashed rgba(  0,  0,  0, 0.15)"></view>
		
		<!-- 列表页面 -->
		<view>
			<view v-for="(item,index) in dataList" :key="index" class="box-card-list bb p-20">
				<view class="fw fs-34">
					<text>{{item.title || ''}}</text>
				</view>
				<view v-if="item.describe" class="mt-10 line-3">
					<text class="fs-26" style="color: #707070;">{{item.describe || ''}}</text>
				</view>
				<view class="mt-20 pos-r">
		
					<view v-if="item.video " @click="playVideo(item,index)">
						<view v-if="index != currentVideo">
							<image class="br-12"
								:src="$timer.ensureUrl(item.cover) || 'https://yjgs.jsonbug.com/storage/default/20241108/20241109164114.jpg'"
								mode="aspectFill" style="height: 380rpx;width: 100%;"></image>
							<image src="https://yjgs.jsonbug.com/storage/default/20241108/video_play_icon.png"
								style="width: 96rpx;height: 96rpx;left: 50%;top: 50%;transform:translate(-50%,-50%)"
								class="br-100p pos-a"></image>
						</view>
						<video autoplay :poster='$timer.ensureUrl(item.cover)' :id="'video-'+item.id"
							v-if="index == currentVideo" style="height: 380rpx;width: 100%;border-radius: 12rpx;"
							:src="$timer.ensureUrl(item.video)">
						</video>
					</view>
		
					<swiper  v-else :autoplay='true' :indicator-dots="$timer.strToArr(item.carousel_images).length > 1"
						style="height: 380rpx;">
						<swiper-item @click="preViewClick(item,_index)"
							v-for="(cur, _index) in $timer.strToArr($timer.ensureUrl(item.carousel_images))" :key="_index">
							<image :src="cur" style="width: 100%;height: 380rpx;border-radius: 12rpx;" ></image>
						</swiper-item>
					</swiper>
		
				</view>
				<view class="mt-10 flex ac sb">
					<view style="color: #707070;">
						<text>{{$timer.formatTime(item.create_time,'yyyy年mm月dd日')}}</text>
					</view>
					<button open-type="share" hover-class="none" class="protoButton">
						<view style="color: #707070;">
							<text class="iconfont-yjgs  fs-40">
								&#xe68c;
							</text>
							<text class="fs-30">分享</text>
						</view>
					</button>
				</view>
			</view>
		</view>
		<!-- end -->
		
		
		<!-- 加载更多 -->
		<uni-load-more :status="status" />
		<!-- end -->
		
		<view style="height: 100rpx;"></view>
		
		<!--自定义底部tab-->
		<customTab :newData="newData" :activeRouter="activeRouter"></customTab>
		
	</view>
</template>

<script>
	import {
		getNavigation
	} from '@/api/public.js';
	import customTab from '@/components/customTab';
	import {
		serviceTrendList
	} from "@/api/extend.js"
	import {
		configMap
	} from "@/utils";
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';

	export default {
		components: {
			customTab,
		},
		data() {
			return {
				currentVideo: -1, //当前播放的索引
				status: 'loading', // more loading noMore
				dataList: [],
				activeRouter: '',
				newData: {},
				homeTop: 88,
				itemObj1Loading: true,
				itemObj1: {},
			}
		},
		computed: configMap({}, mapGetters(['isLogin', 'uid'])),
		// #ifdef MP
		onShareAppMessage: function() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: '贵商探访',
				path: `pages/extend/project_model/index_desc?uid=${this.uid || -1}`,
			}
		},
		onShareTimeline: function() {
			return {
				title: '贵商探访',
				query: {
					key: ''
				},
				imageUrl: ''
			}
		},
		// #endif
		onReady() {
			// #ifdef MP-WEIXIN
			this.$nextTick(function() {
				// #ifdef MP
				const menuButton = uni.getMenuButtonBoundingClientRect();
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#home')
					.boundingClientRect(data => {
						this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
					})
					.exec();
				// #endif
			});
			// #endif
		},
		onReachBottom() {
			if (this.status == 'noMore') return;
			this.current_page++;
			this.serviceTrendListFunc();
		},
		onLoad(options) {
			this.options = options;
			this.getNav();
			this.serviceTrendListFunc()
		},
		created() {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			this.activeRouter = '/' + curRoute
		},
		methods: {
			preViewClick(item, _index) {
				if (item.to_url) {
					uni.setStorageSync('webViewUrl',item.to_url);
					uni.navigateTo({
						url: item.to_url
					})
				} else {
					this.$timer.preView(this.$timer.strToArr(item.carousel_images), _index)
				}
			},
			playVideo(item,index) {
				this.currentVideo = index;
			},
			serviceTrendListFunc() {
				serviceTrendList({
					limit: 8,
					page: this.current_page,
					type:'1,2'
				}).then(res => {
					let data = res.data.data;
					this.current_page = res.data.current_page;
			
					if (data.length < 8) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}
			
					this.dataList = [...this.dataList, ...data];
				})
			},
			getNav() {
				getNavigation().then(res => {
					this.newData = res.data;
					if (this.newData.status && this.newData.status.status) {
						uni.hideTabBar()
					} else {
						uni.showTabBar()
					}
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.box-title-txt {
		font-weight: bold;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	.box-main-top {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		width: 100%;
		background-color: white;
		z-index: 99;
	}
	
	.box-logo {
		width: 240rpx;
		height: 41rpx;
	}
	
	.head-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
</style>